<template>
    <div>
        <div style="position: fixed;top:20px;left:20px;z-index: 1;">
            <van-icon name="arrow-left" @click="goBack"/>
        </div>
        <div style="width: auto;">
            <van-swipe @change="onChange" >
                <van-swipe-item v-for="img in spu.spuImgs">
                    <img style="width: 400px;height: 400px"
                         :src="img.img">
                </van-swipe-item>

                <template #indicator>
                    <div class="custom-indicator">
                        {{ current + 1 }}/5
                    </div>
                </template>
            </van-swipe>
        </div>

        <van-cell-group>
            <van-cell>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #ee0a24;">￥<span style="font-size: 30px;">{{spu.spuMoney}}</span></span>
                    <span>
                        <van-icon name="star-o" size="20px" v-if="collectCount==0" @click="addCollect" >
                            <p style="font-size: 8px;color: #323233;">收藏</p>
                        </van-icon>
                        <van-icon name="star" size="20px" color="red" v-if="collectCount==1"  @click="updateCollect">
                             <p style="font-size: 8px;color: #323233;">已收藏</p>
                        </van-icon>
                    </span>
                </div>
            </van-cell>
            <van-cell style=" border: 0px;height: 30px; padding: 5px;padding-left: 20px">
                <div style="display: flex; justify-content: space-between;margin-bottom: -50px">
                    <span style="color: #ee0a24;">{{denominations}}</span>
                    <span>
                        <span style="color: #ee0a24;margin-right: 10px" @click="draw">领卷</span>
                        <van-icon name="arrow" color="#ee0a24"/>
                    </span>
                </div>
            </van-cell>
            <van-cell :title="spu.spuName"
                      style="font-size:16px;font-weight: bolder"
            >
            </van-cell>
            <van-coupon-cell
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    @click="showList = false" />
            <!-- 优惠券列表 -->
            <van-popup
                    v-model="showList"
                    round
                    position="bottom"
                    style="height: 90%; padding-top: 4px;">
                <!-- :chosen-coupon="chosenCoupon"
             :disabled-coupons="disabledCoupons"-->
                <coupon
                        :coupons="coupons"
                        @show="show"
                        @change="onChange2"
                        @exchange="onExchange"/>
            </van-popup>
            <van-cell is-link title="服务" @click="serviceShow = true" />
            <van-action-sheet title="服务"  v-model="serviceShow" >
                <div class="content" v-for="service in spu.serviceEnsures">{{service.serviceEnsureName}}</div>
            </van-action-sheet>


            <van-cell is-link title="选择" @click="selectSku"/>
        </van-cell-group>


        <van-tabs v-model="active">
            <van-tab title="商品详情">
                <p style="width:300px" v-html="spu.spuDetail">{{spu.spuDetail}}</p>
            </van-tab>
            <van-tab title="商品参数">
                <div v-for="b in spu.spuBaseAttrs">
                    <span>{{b.attrName}}</span>
                    <span>{{b.attrValue}}</span>
                </div>
            </van-tab>
            <van-tab title="评论">评论</van-tab>

        </van-tabs>

        <sku v-bind:showSku="showSku"></sku>




        <div>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" dot/>
                <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="toShopCart"/>
                <van-goods-action-icon icon="shop-o" text="店铺" badge="12"/>
                <van-goods-action-button type="warning" @click="addCart" text="加入购物车"/>
                <van-goods-action-button type="danger" @click="buy" text="立即购买"/>
            </van-goods-action>
        </div>

    </div>
</template>

<script>
    import Sku from "../../components/sku/Sku";
    import Coupon from "../coupon/Coupon";
    const coupon = {
        couponId: '',
        couponName: '',
        couponDenomination: '',
        couponQuota: 0,
        couponMoney: 0,
        merchantId: 1,
        spuId: 0,
        createtime: '',
        startVaildTime: '',
        stopVaildTime: '',
        couponNum: 0,
        couponStatus: 0,
        createBy: 0,
        updateBy: 0,
        remainder: 0,
        eachLimitGet: '',
        goodsType: '',
        days: '',

    };
    export default {
        components: {Sku,Coupon},
        comments: {
            Sku
        },
        name: "Goods",
        data() {
            return {
                collectCount:'',
                active:1,
                current: 0,
                showSku: {
                    status: false
                },
                spu:'',
                denominations: '',
                chosenCoupon: -1,
                coupons: [coupon],
                //    disabledCoupons: [coupon],
                showList: false,
                serviceShow:false,
                skuShow:false,
            };
        },
        created(){
            this.getSingleCoupon();

            this.getSpu();
            this.getCollectCount();
        },
        methods: {
            addCollect(){
                this.$axios({
                    method: "post",
                    url: "http://localhost:8101/collect/addMyCollect",
                    params:{
                        spuId:19,
                        userId:1
                    }
                }).then(result => {
                    this.getCollectCount();
                })
            },
            updateCollect(){
                this.$axios({
                    method: "post",
                    url: "http://localhost:8101/collect/deleteMyCollect",
                    params:{
                        spuId:19,
                        userId:1
                    }
                }).then(result => {
                    this.getCollectCount();
                })
            },
            getSpu(){
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/spu/findByIdSpu/"+19
                }).then(result => {
                    this.spu=result.data;
                })
            },

            getCollectCount(){
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/collect/getCollectCount",
                    params:{
                        spuId:19,
                        userId:1
                    }
                }).then(result => {
                    console.log(result.data);
                    this.collectCount=result.data;
                })
            },

            selectSku(){
                this.showSku.status = true
            },
            onChange(index) {
                this.current = index;
            },
            goBack() {
                // this.$router.push({path: '/'});
                // this.$router.back();
                window.history.back();

            },
            onClose() {
                this.setData({ show: false });
            },
            onCancel() {
                this.show = false;
                Toast('cancel');
            },
            onChange2(index) {
                this.showList = false;
                this.chosenCoupon = index;
            },
            onExchange(code) {
                this.coupons.push(coupon);
            },
            show(val){
                this.showList=val;
            },
            buy() {
                console.log("购买")
                this.showSku.status = true
            }, addCart() {
                console.log("购物车")
                this.showSku.status = true
            }, toShopCart() {
                this.$router.replace({path: "/shopCart"})
            },
            getSingleCoupon () {
                this.$axios.get("http://localhost:8301/merchantCoupon/getMerchantSingleCoupon?merchantId="+1).then(res => {
                    this.denominations=res.data.couponDenomination;
                })
            },
            draw () {
                this.$axios.get("http://localhost:8301/merchantCoupon/getCouponByMerchantId?merchantId="+1).then(res => {
                    this.coupons=res.data;
                    console.log(this.coupons,"+++_+++++")
                })
                this.showList=true

            },
        }
    }
</script>

<style scoped>
    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    body {
        background: gray;
    }
    .content {
        padding: 16px 16px 50px;
    }
</style>
